<template>
    <div class="login flex_center">
        
        <!-- 登陆模式 -->
        <div class="box card flex_column" v-if="isLogin">
            <Input label="用户名" :value.sync="formData.username"/>
            <Input label="密码" :value.sync="formData.password"/>
            <Button value="登陆" @click="_login"/>
            <div class="flex_center_bottom" style="marginTop:1em;width:320px;">
                <span class="atext" @click="isLogin=false">前往注册</span>
                <span class="atext" @click="_withoutLogin">以游客游客进入</span>
            </div>
        </div>

        <!-- 注册模式 -->
        <div class="box card flex_column" v-else>
            <Input label="用户名" :value.sync="formData.username"/>
            <Input label="密码" :value.sync="formData.password"/>
            <div class="flex_center_bottom" style="marginTop:1em;width:320px;">
                <Button value="注册" @click="_register"/>
                <span class="atext" @click="isLogin=true">返回</span>
            </div>
        </div>
    </div>
</template>
<script>
import Input from '../components/FormItem.vue'
import Button from '../components/Button.vue'
import { mapGetters } from 'vuex'

export default{
    components:{
        Input,
        Button
    },
    data(){
        return{
            isLogin:true,//是否为登陆模式
            //用户名与密码
            formData:{
                username:'',
                password:'',
            }
        }
    },
    computed: {
        ...mapGetters([
            'userDataGetter',
        ])
    },
    methods:{

        // 登陆
        _login(){
            let {username,password}=this.formData

            // 1 先验证是否为空
            if(username==''){
                alert('用户名不能为空！')
                return
            }
            if(password==''){
                alert('密码不能为空')
                return
            }

            // 2 判断用户是否存在
            let idx=this.userDataGetter.findIndex(item=>item.username==username)
            if(idx==-1){
                alert('用户不存在！')
                return
            }else{
            // 3 再判断密码是否正确
                if(this.userDataGetter[idx].password!=password){
                    alert('密码错误！')
                    return
                }
            }

            // 4 上面验证都通过时 指定登陆，跳转路由
            this.$store.commit('loginAccount')
            this.$router.push('/diary/home')
        },

        // 注册
        _register(){
            let {username,password}=this.formData

            // 1 先验证是否为空
            if(username==''){
                alert('用户名不能为空！')
                return
            }
            if(password==''){
                alert('密码不能为空')
                return
            }

            // 2 获取当前用户数据中是否存在该用户名
            let idx=this.userDataGetter.findIndex(item=>item.username==username)
            if(idx!=-1){
                alert('该用户已存在！')
            }else{
            // 3 上面验证通过后，注册用户，想用户数据里添加该用户
                this.$store.commit('registerAccount',this.formData)
                alert('注册成功！')
                this.isLogin=true
            }
        },

        // 以游客身份进入
        _withoutLogin(){
            this.$store.commit('withoutLogin')
            this.$router.push('/diary/home')
        }
    }

}
</script>
<style scoped lang="less">
.login{
    background: #4CB98A;
    height: 100vh;
    .box{
        width: 400px;
        height: 300px;
        line-height: 2em;
        font-size: 1.2em;
        .button{
            margin-top: 1em;
        }
    }
    
}

</style>

